<*****攻防赛*****>
<template>
    <div id="compReport" class="compReport" :style="{ fontSize: fontSize + 'px' }">
        <report-header
            @downloadReports="downloadReports"
            @zoomIn="zoomIn"
            @zoomOut="zoomOut"
            :title="reportInfo.name"
            :scale="scale"
            :disSub="disSub"
            :disDownloadReport="disDownloadReport"
            :isArchive="1"
            @archiveReports="archiveReports"
        >
        </report-header>
        <div class="reportContent">
            <cover :style="pageMargin" :title="reportInfo.name" :data="coverData" :configAddress="configAddress" :configInstruction="configInstruction" :showFooter="configReportFooter"></cover>
            <page
                class="page2"
                :style="pageMargin"
                :title="reportInfo.name"
                :configAddress="configAddress"
                :configInstruction="configInstruction"
                :showFooter="configReportFooter"
            >
                <!--slot--页面主体部分-->
                <div id="scoreAnalysis" class="chart" style="height: 100%; width: 100%"></div>
            </page>
            <page
                class="page3"
                :style="pageMargin"
                type="table"
                :title="reportInfo.name"
                v-for="(item, index) in rankListPageNumArr"
                :key="`page3-${index}`"
                :configAddress="configAddress"
                :configInstruction="configInstruction"
                :showFooter="configReportFooter"
            >
                <!--slot--页面主体部分-->
                <div :style="{ height: getContentHeight() + 'px' }">
                    <h4>排行总榜</h4>
                    <small v-if="!['8', '9'].includes(type)"
                        >(得失分:攻击得分/防守得分/异常得分/异常失分，攻击次数:总次数/成功次数/失败次数/被攻击次数)</small
                    >
                    <Table stripe :columns="reportCol" :data="item.data" class="rankTable"></Table>
                </div>
            </page>
            <page
                class="page4"
                :style="pageMargin"
                type="table"
                :title="reportInfo.name"
                v-for="(item, index) in contestPageNumArr"
                :key="`page4-${index}`"
                :configAddress="configAddress"
                :configInstruction="configInstruction"
                :showFooter="configReportFooter"
            >
                <!--slot--页面主体部分-->
                <div :style="{ height: getContentHeight() + 'px' }">
                    <h4 style="margin-bottom: 12px">竞赛数据</h4>
                    <Table stripe :columns="contestCol" :data="item.data" class="rankTable"></Table>
                </div>
            </page>
        </div>
    </div>
</template>

<script>
import HighCharts from 'highcharts';
import highchartsMore from 'highcharts/highcharts-more';
import * as SeriesLabel from 'highcharts/modules/series-label';
//	import html2canvas from 'html2canvas'
//	import jsPDF from 'jspdf'
import mixin from '@/components/report/mixinFun.js';
import encryption from '@/libs/encryption.js';
//接口
import { competeReport, getSceneInfo, competDrillTableTeamStatistics } from '@/api/drill_compete';
//组件
import reportHeader from '@/components/report/reportHeader.vue';
import cover from '@/components/report/cover.vue';
import page from '@/components/report/page.vue';
import { parseJson } from '@/libs/utils';
export default {
    name: 'adcReport',
    components: {
        page,
        cover,
        reportHeader,
    },
    mixins: [mixin],
    data() {
        let September = sessionStorage.getItem('November');
        September = JSON.parse(encryption.SelfUseDecrypt(September));
        return {
            type: this.$route.query.type,
            scoringType:this.$route.query.scoringType,
            reportCol: [
                {
                    key: 'teamName',
                    title: '团队名称',
                    per: 0.25,
                },
                {
                    key: 'totalScore',
                    title: '总分',
                    per: 0.25,
                },
                {
                    key: 'totalScore',
                    title: '得失分',
                    render: (h, params) => {
                        return h(
                            'span',
                            (params.row.attackScore || 0) +
                                '/' +
                                (params.row.defenseScore || 0) +
                                '/' +
                                (params.row.exceptScore || 0) +
                                '/' +
                                (params.row.exceptLostScore || 0)
                        );
                    },
                    per: 0.25,
                },
                {
                    key: 'totalScore',
                    title: '攻击次数',
                    render: (h, params) => {
                        return h(
                            'span',
                            (params.row.totalCount || 0) +
                                '/' +
                                (params.row.attackCount || 0) +
                                '/' +
                                (params.row.failCount || 0) +
                                '/' +
                                (params.row.defenseFailedCount || 0)
                        );
                    },
                    per: 0.25,
                },
            ],
            reportInfo: {},
            sceneId: this.$route.query.id,
            scale: 1,
            fontSize: 14,
            disSub: false,
            rankList: [],
            rankListPageNumArr: [],
            contestTableList: [],
            contestPageNumArr: [],
            contestCol: [],
            disDownloadReport: true,
            userName: September.userName,
        };
    },
    watch: {},
    filters: {},
    computed: {
        extension() {
            return parseJson(this.reportInfo.extension);
        },
        basisScore() {
            return this.extension.basicScore || 5000;
        },
        coverData: function () {
            let { startTime, endTime, userCount, creatorName, teamCount } = this.reportInfo;
            return [
                {
                    value: startTime,
                    title: '开始时间',
                },
                {
                    value: endTime,
                    title: '结束时间',
                },
                {
                    value: creatorName,
                    title: '创建者',
                },
                {
                    value: (teamCount || 0) + '个',
                    title: '参赛团队',
                },
                {
                    value: (userCount || 0) + '人',
                    title: '参赛人数',
                },
            ];
        },
    },
    mounted() {
        this.setStyle();
        this.getDrillDetail();
        window.onresize = () => {
            this.disDownloadReport = true;
            this.setStyle();
        };
        this.changeReportCol();
        this.competDrillTableTeamStatistics();
    },
    beforeDestroy() {},
    methods: {
        archiveReports() {
            // let conetent={...this.reportInfo,...this.rankListPageNumArr,...this.remarkListPageNumArr}
            let content = {
                reportInfo: this.reportInfo,
                rankListPageNumArr: this.rankListPageNumArr,
                contestPageNumArr: this.contestPageNumArr,
            };
            let data = {
                userName: this.userName,
                associateId: this.sceneId,
                name: this.reportInfo.name,
                type: 3,
                drillType: this.$route.query.type,
                content: JSON.stringify(content),
            };
            // console.log(this.type,'this.typethis.type');
            this.saveArchive(data);
        },
        getTablePage() {
            this.initCol();
            if (this.contestTableList.length > 0) {
                this.contestPageNumArr = this.getTablePageData(
                    this.contestCol,
                    this.contestTableList
                );
                console.log(this.contestPageNumArr, 'contestPageNumArrcontestPageNumArr');
            }
        },
        initCol() {
            this.contestCol = [
                {
                    type: 'index',
                    width: 60,
                    title: '排名',
                    align: 'center',
                },
                {
                    key: 'teamName',
                    title: '团队名称',
                    width: 34,
                },
                {
                    key: 'spendTime',
                    title: '竞赛时长',
                    per: 0.2,
                },
                {
                    key: 'missionNum',
                    title: '竞赛总任务数',
                    width: 30,
                },
                {
                    key: 'teamAttackNum',
                    title: '团队攻击总数',
                    width: 30,
                },
                {
                    key: 'teamFinishMissionNum',
                    title: '团队有效攻击次数',
                    per: 0.2,
                },
                {
                    key: 'rightAttackPercent',
                    title: '有效攻击指数',
                    per: 0.2,
                    render: (h, params) => {
                        return h('span', params.row.rightAttackPercent + '%');
                    },
                },
                {
                    key: 'attackPercent',
                    title: '攻击指数',
                    per: 0.2,
                    render: (h, params) => {
                        return h('span', params.row.attackPercent + '%');
                    },
                },
                {
                    key: 'threatPercent',
                    title: '威胁指数',
                    per: 0.35,
                    render: (h, params) => {
                        return h('span', params.row.threatPercent + '%');
                    },
                },
            ];
        },
        competDrillTableTeamStatistics() {
            competDrillTableTeamStatistics([this.sceneId]).then((res) => {
                if (res.code == 1) {
                    this.contestTableList = res.data;
                    this.getTablePage();
                    console.log(
                        this.contestTableList,
                        'this.contestTableListthis.contestTableList'
                    );
                } else {
                    this.$Message.warning(res.message);
                }
            });
        },
        changeReportCol() {
            if (this.type === '8') {
                if(this.scoringType == 0){
                    this.reportCol = [
                        {
                            key: 'teamName',
                            title: '团队名称',
                            per: 0.25,
                        },
                        {
                            key: 'totalScore',
                            title: '总分',
                            per: 0.093,
                        },
                        {
                            title: '基础分',
                            key: 'basisScore',
                            per: 0.093,
                            render: (h, params) => {
                                return h('span', this.basisScore || 5000);
                            },
                        },
                        {
                            title: '攻击得分',
                            key: 'attackScore',
                            per: 0.093,
                        },
                        {
                            title: '防守得分',
                            key: 'defenseScore',
                            per: 0.093,
                        },
                        {
                            title: '防守失分',
                            key: 'defenseLostScore',
                            per: 0.093,
                        },
                        {
                            title: '重置失分',
                            key: 'resetLostScore',
                            per: 0.093,
                        },
                        {
                            title: '异常得分',
                            key: 'exceptScore',
                            per: 0.093,
                        },
                        {
                            title: '异常失分',
                            key: 'exceptLostScore',
                            per: 0.093,
                        },
                    ];
                }else{
                    this.reportCol = [
                        {
                            key: 'teamName',
                            title: '团队名称',
                            per: 0.25,
                        },
                        {
                            key: 'totalScore',
                            title: '总分',
                            per: 0.25,
                        },
                        {
                            title: '攻击得分',
                            key: 'attackScore',
                            per: 0.25,
                        },
                        {
                            title: '防守得分',
                            key: 'defenseScore',
                            per: 0.25,
                        }
                    ];
                }
            }
            if (this.type === '9') {
                this.reportCol = [
                    {
                        key: 'teamName',
                        title: '团队名称',
                        per: 0.25,
                    },
                    {
                        key: 'totalScore',
                        title: '总分',
                        per: 0.15,
                    },
                    {
                        title: '攻击得分',
                        key: 'attackScore',
                        per: 0.15,
                    },
                    {
                        title: '运维得分',
                        key: 'defenseScore',
                        per: 0.15,
                    },
                    {
                        title: '额外得分',
                        key: 'exceptScore',
                        per: 0.15,
                    },
                    {
                        title: '额外失分',
                        key: 'exceptLostScore',
                        per: 0.15,
                    },
                ];
            }
        },
        setStyle() {
            let width = window.innerHtml || document.documentElement.clientWidth;
            this.fontSize = (width / 1519) * 14;
            if (this.fontSize < 10) {
                this.fontSize = 10;
            }
            this.setPageMargin();
            this.getRankPage();
            this.getTablePage()
        },
        initReportCol() {
            this.reportCol = [
                {
                    key: 'teamName',
                    title: '团队名称',
                    per: 0.25,
                },
                {
                    key: 'totalScore',
                    title: '总分',
                    per: 0.25,
                },
                {
                    key: 'totalScore',
                    title: '得失分',
                    render: (h, params) => {
                        return h(
                            'span',
                            (params.row.attackScore || 0) +
                                '/' +
                                (params.row.defenseScore || 0) +
                                '/' +
                                (params.row.exceptScore || 0) +
                                '/' +
                                (params.row.exceptLostScore || 0)
                        );
                    },
                    per: 0.25,
                },
                {
                    key: 'totalScore',
                    title: '攻击次数',
                    render: (h, params) => {
                        return h(
                            'span',
                            (params.row.totalCount || 0) +
                                '/' +
                                (params.row.attackCount || 0) +
                                '/' +
                                (params.row.failCount || 0) +
                                '/' +
                                (params.row.defenseFailedCount || 0)
                        );
                    },
                    per: 0.25,
                },
            ];
            this.changeReportCol();
        },
        getRankPage() {
            this.initReportCol();
            if (this.rankList.length > 0) {
                this.rankListPageNumArr = this.getTablePageData(this.reportCol, this.rankList);
            }
            this.$nextTick(() => {
                this.disDownloadReport = false;
            });
        },
        getDrillDetail() {
            getSceneInfo(this.sceneId).then((data) => {
                this.reportInfo = data.data;
                this.generateReport();
            });
        },
        //生成报告
        generateReport() {
            let _this = this;
            competeReport(this.sceneId).then((data) => {
                if (data.code == 1) {
                    let reportInfo = data.data;
                    this.rankList = reportInfo.rankList;
                    //						测试用
                    //						for(let i = 0; i < 100; i++) {
                    //							this.rankList.push(Object.assign({},this.rankList[0]))
                    //						}
                    //						this.rankList.forEach((rank, index) => {
                    //							rank.rank = index + 1;
                    //						})
                    this.getRankPage();
                     this.getTablePage()
                    this.reportInfo = Object.assign({}, this.reportInfo, reportInfo);
                    this.$nextTick(() => {
                        this.drawChart();
                    });
                } else {
                    this.$Message.error(data.message);
                }
            });
        },
        drawChart() {
            let _this = this;
            let users = [];
            let categorys = [];
            let indicatorData = [];
            if (_this.reportInfo.rankList.length <= 0) {
                return;
            }
            let scoreOptione = {
                chart: {
                    backgroundColor: 'transparent',
                },
                title: {
                    text: '得分趋势统计',
                    align: 'left',
                    y: this.fontSize * 0.8,
                    style: {
                        fontSize: this.fontSize * 0.8 + 'px',
                        fontWeight: 'bold',
                        //		            color: 'red'   //这边是改标题的字体大小和颜色
                    },
                },
                legend: {
                    //        	floating: true,
                    align: 'left',
                    verticalAlign: 'top',
                    itemStyle: {
                        fontSize: this.fontSize * 0.6 + 'px',
                        fontWeight: 'normal',
                        //		            color: 'red'   //这边是改标题的字体大小和颜色
                    },
                },
                xAxis: {
                    categories: _this.reportInfo.rankList[0].scoreVO.map(
                        (score) => score.scoreDate.split(' ')[1]
                    ),
                    labels: {
                        style: {
                            fontSize: this.fontSize * 0.6,
                        },
                    },
                },
                plotOptions: {
                    series: {
                        label: {
                            //connectorAllowed: false
                        },
                    },
                },
                yAxis: {
                    title: {
                        text: '得分',
                    },
                },
                series: _this.reportInfo.rankList.map((user) => {
                    return {
                        name: user.teamName,
                        //type:'line',
                        data: user.scoreVO.map((score) => score.score),
                    };
                }),
                credits: {
                    enabled: false,
                }, //去掉地址
                exporting: {
                    enabled: false,
                }, //隐藏导出图片
                responsive: {
                    rules: [
                        {
                            condition: {
                                maxWidth: 500,
                            },
                            chartOptions: {
                                legend: {
                                    layout: 'horizontal',
                                    align: 'left',
                                    verticalAlign: 'top',
                                },
                            },
                        },
                    ],
                },
            };
            SeriesLabel(HighCharts);
            HighCharts.chart('scoreAnalysis', scoreOptione);
        },
        zoomIn() {
            if (this.scale == 0.5) {
                return;
            }
            this.disDownloadReport = true;
            this.scale = this.accSub(this.scale, 0.1);
            if (this.scale != 0) {
                this.fontSize = this.fontSize - 0.5;
            }
            this.drawChart();
            this.setPageMargin();
            this.getRankPage();
            this.getTablePage()
        },
        zoomOut() {
            if (this.scale == 3) {
                return;
            }
            this.disDownloadReport = true;
            this.scale = this.accAdd(this.scale, 0.1);
            if (this.scale != 0) {
                this.fontSize = this.fontSize + 0.5;
            }
            this.drawChart();
            this.setPageMargin();
            this.getRankPage();
            this.getTablePage()
        },
    },
    destroyed() {},
};
</script>

<style scoped src="@/components/report/report.css"></style>
